<h3 *ngIf="displayType === 'overview'" class="mb-4">Rating Overview</h3>
<div class="shadow">
    <div class="d-flex flex-row align-items-stretch">
        <div class="card w-50 left-card" [ngClass]="{'stacked-card': displayType === 'overview'}">
            <div class="card-body pb-3">
                <h5 class="mb-2">ESG Risk Rating</h5>

                <span class="current-rating">{{ riskRating ? riskRating.toFixed(1) : 0 }}</span>
                <span class="max-rating">/{{ maxRating}}{{addPlus ? "+" : "" }}</span>
                <span class="current-assessment">{{ currentClusterName }} Risk</span>

                <div *ngIf="currentClusterCode && riskRating" intervalChart [chartID]="'intervalXchart'" [clusters]="riskClusters" [companyCode]="currentClusterCode"
                    [axisReversed]="true" [arrowPositionY]="-7" [currentValue]="riskRating" style="position: relative" [addPlus]="addPlus" >
                    <div id="intervalXchart" class="intervalChart"></div>
                    <div id='intervalXchartAxis' style="height: 12px; margin-top: -20px;"></div>
                </div>

                <p class="small mt-5 mb-1">Calculated using our
                    <a *ngIf="!isCore"  href="https://globalaccess-tutorials.s3.amazonaws.com/ESG%20Risk%20Rating_Methodology%20document.pdf" target="_blank">ESG Risk Rating Methodology </a>
                    <a *ngIf="isCore"  href="https://globalaccess-tutorials.s3.amazonaws.com/Core%20ESG%20Risk%20Ratings_Methodology.pdf" target="_blank">ESG Risk Rating Methodology </a>
                    <i class="ti-help-alt ml-1 text-dark-grey pointer" (click)="ratingScaleModalOverview.show()"></i>
                </p>
                <div *ngIf="mei && mei.comments.analyst && meiType == 'MaterialIssue'" class="comment">
                        {{ mei.comments.analyst | slice:0:160 }}
                </div>
                <p *ngIf="lastUpdate" class="small mb-1">Last Update: {{ lastUpdate | date: 'MMM dd, yyyy' }}</p>
                <p *ngIf="company?.comments?.businessModel" class="small mb-1">
                    <a href="javascript:;;" (click)="businessProfileModal.show()" class="text-link">View Company's Business Model</a>
                </p>
            </div>
        </div>

        <div class="card w-50 right-card" [ngClass]="{'stacked-card': displayType === 'overview'}">
            <div class="card-body pb-3">
                <subindustry-risk-rating *ngIf="displayType === 'overview'" #subIndustry [displayType]="'distribution'" [isCore]="isCore"></subindustry-risk-rating>
                <mei-subindustry-risk-rating *ngIf="displayType === 'mei' && meiType !== 'IdiosyncraticIssue'" #subIndustry [displayType]="'distribution'"></mei-subindustry-risk-rating>

                <div *ngIf="displayType === 'mei' && meiType === 'IdiosyncraticIssue'">
                    <div class="d-flex align-items-center">
                        <h5 class="mr-auto">Exposure</h5>
                    </div>
                    <span class="pillar-current-rating">{{ mei?.exposure | number:'1.1-2' }}</span>
                    <span class="pillar-max-rating">/20</span>

                    <hr />

                    <h5>Management Score</h5>
                    <span class="pillar-current-rating">{{ mei?.management | number:'1.1-2' }}</span>
                    <span class="pillar-max-rating">/100</span>

                    <p class="mt-3">Idiosyncratic issues are represented only by the event indicator for the issue. The management score
                        for idiosyncratic issues is always 0.</p>
                </div>
            </div>
        </div>
    </div>

    <div *ngIf="displayType === 'overview'" class="card bg-primary-light bottom-card">
        <div *ngIf="currentClusterName" class="card-body">
            <strong *ngIf="!isCore"> {{company?.comments.analystViewOverallAssessment}}  </strong>
            <strong *ngIf="isCore"> {{company?.sentences[6].value}} </strong>
        </div>
    </div>
</div>

<app-modal #businessProfileModal [id]="'businessProfileModal'" [size]="'modal-lg'">
    <div class="app-modal-header">
        Business Model
    </div>
    <div class="app-modal-body px-4">
        <p [innerHtml]="company?.comments?.businessModel"></p>
    </div>
</app-modal>

<app-modal #ratingLegendModal [id]="'ratingLegendModal'" [size]="'modal-lg'">
    <div class="app-modal-header">

    </div>
    <div class="app-modal-body px-4">

    </div>
</app-modal>

<app-modal #ratingScaleModalOverview [id]="'ratingScaleModalOverview'" [size]="'modal-lg'" [showCloseButton]=true>
    <div class="app-modal-header">
        ESG Risk Rating
    </div>
    <div class="app-modal-body px-4">
        <div class="d-flex mb-1" *ngFor="let cluster of riskClusters">
            <div class="w-5">
                <div class="chart-legend-block rating-block" [style.background]="cluster.color"></div>
            </div>
            <div class="w-95"><span class="bold">{{ cluster.name }} risk</span>: enterprise value is considered to have a {{ cluster.name | lowercase }} risk of material financial impacts driven by ESG factors</div>
        </div>
    </div>
</app-modal>